검색에 관해서
지난주까지 정말 바쁘게 보냈다.
대략 2년 정도 개발 및 운영된 기존의 코드베이스를 전부 재작성하는 작업을 마무리했고, 친구들과 진행하던 운영체제 공부도 진도를 다 나갔다.
글을 쓸만한 내용은 계속 생기는데 바빴다 보니 또 포스팅을 띄엄띄엄 하게 된다.
시간 날 때 관련된 내용을 포스팅하기로 다짐하면서, 오늘 생긴 주제인 검색에 관한 간단한 포스팅을 작성하겠다.
검색이란
내가 생각하는 검색이란 사용자의 입력을 기반으로, 관련 된 내용을 표시하는 것이다.
해당 포스팅에서의 검색은 포털이나, 전문적인 검색기능을 제공하는 서비스 레벨이 아닌 리액트 테이블에서의 글로벌 필터링이니 참고하자!
이슈
현재 프로젝트에서 리액트 테이블을 사용하는데
테이블들의 검색 기능에서 검색어와 검색칼럼 내용에 공백을 제거한 값으로 검색이 가능하냐는 요청을 받았다.
기존에는 라이브러리에서 제공하는 그대로 사용하고 있었는데, 커스텀 로직을 작성하게 된 것이다.
v8 기준으로 globalFilterFn 속성에 커스텀 로직을 넣어주면 된다.
해당 함수는 boolean을 리턴해주면 되는데, 파라미터에서 칼럼의 밸류를 어떻게 구하는지를 약간 헤맸다.
버전이 달라서 파라미터도 변경된 것 같더라.
리액트 테이블은 @tanstack/table-core의 어댑터고, core 링크의 src/filterFns.ts에서 해당 함수를 어떻게 작성하면 될지 알 수 있었다.
초성 검색
기왕 시작한거 초성검색까지 적용해야겠다는 생각이 들었다.
이전에 봐뒀던 es-hangul을 사용하면 쉬울 것 같았다.
getChoseong 사용해서 적용하니 잘 되어, 공백 제거 + 초성 검색을 커스텀로직에 작성하였다.
새로운 문제
검색을 하다보니, 알파벳이 먼저 나오는 단어들에 대해 초성검색이 뭔가 생각한 것 처럼 안되는 상황이 나왔는데, getChoseong은 한글 초성만 반환해서 그런 것 이었다.
- abc버거 -> ㅂㄱ
위의 상황에서 결과값이 abcㅂㄱ가 되는게 적합한 상황이었다...!
해결책
고민을 하다 보니 글자 단위로 변환하면 될 것 같다고 생각했고, getChoseong을 사용하지 않기로 했는데 이유는 다음과 같다.
- 기본적으로 한 글자만을 처리하기 위한 함수가 아니다. 정규식을 사용하고 있는데 정규식을 이용한 문자열 구문분석은 상대적으로 속도가 느린 것으로 알고 있다. 그런데 글자마다 사용하는 건 낭비 같다는 생각이 들었다.
- 글자의 초성을 구하는 것은 상대적으로 간단하다.
자바스크립트가 문자열을 처리하는 기준인 UTF-16에서는 ＂가＂, ＂강＂ 이런 식으로 단어들이 각각 등록되어 있는데, 해당 문자 코드의 나누기연산으로 초성을 구할 수 있다.
이렇게 글자가 공백이면 제외, 한글은 초성으로, 그 외는 그대로 변환하는 로직을 작성했다.
여기서도 문자열 연산을 매번 하는 것보다(매번 새로운 문자열을 생성), arr에 push 해서 마지막에 조인하는 게 약간의 이점이 있는 것 같아 적용했다(해당 함수는 실행빈도가 매우 잦음).
outro
나름 재밌게 작업해서 기록으로 남긴다.
그리고 쌓인 주제들을 빨리빨리 작성 해야겠다!